<template>
    <nav class="service-nav">
        
    </nav>
    <ServiceListContent :serviceList="serviceList" />
    <ElPagination
        class="mt20"
        :pageSize="serviceQueryParams.size"
        layout="total, prev, pager, next"
        :total="total"
        @currentChange="handleCurrentChange"
    ></ElPagination>
</template>

<script lang="ts" setup>
import { reactive, ref, Ref } from 'vue';
import ServiceListContent from '@/views/ServiceList/Components/ServiceListContent.vue';
import { getGoodList } from '@/api/api.query.util';
import { useRouter } from 'vue-router';
const router = useRouter();
import { Service } from '@/types/service.d';
const currentRouteData = router.currentRoute.value;
const adPicUrl = ref(require('@/assets/image/chengshi.jpeg'));

const serviceQueryParams = reactive({
    serviceName: '',
    page: 1,
    size: 10,
});
const serviceList: Ref<Array<Service>> = ref([]);
const total: Ref<number> = ref(0);

// 获取服务列表
getService();

async function getService() {
    getGoodList({
        method: 'get',
        data: {
            page: serviceQueryParams.page,
            size: serviceQueryParams.size
        }
    }).then((res) => {
        serviceList.value = res.data.content
        total.value = res.data.pageable.total
    })
}

function handleCurrentChange(page: number) {
    serviceQueryParams.page = page;
    getService();
}
</script>

<style scoped>
.service-ad-pic_wrapper {
    height: 128px;
    margin-bottom: 16px;
}
.service-ad-pic_wrapper img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.service-nav {
    display: flex;
    justify-content: space-between;
    height: 50px;
    background-color: var(--section-color);
    border-radius: var(--border-radius);
    margin-bottom: 18px;
}

.service-category {
    display: flex;
}

.service-category > li {
    display: flex;
    align-items: center;
    padding: 0 40px;
}

.service-filter_icon {
    width: 16px;
    height: 16px;
    background: url('~@/assets/image/shaixuan_default@2x.png') no-repeat center center / 16px;
    cursor: pointer;
}

.service-filter {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 56px;
}

.mt20 {
    margin-top: 20px;
}
</style>
